import React, { useState, useEffect } from 'react'
import {
    Modal,
    Button,
    Form,
    Input,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Checkbox,
    Space
} from 'antd';

import '../../scss/RcAddRules.scss'
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

import { useDispatch } from "react-redux";
import { rcDataShowRequest } from '../../../../../store/RcManagement/action'

// 引入请求
import { addRcData } from '../../axiosHttp/index'


function RcAddRules() {

    const dispatch = useDispatch()

    // 定义一个状态值
    const [visible, setVisible] = useState(false);

    // 存储 选择好的时间
    const [timeData, setTimeData] = useState([])

    const { TextArea } = Input;

    // from 表单
    const [form] = Form.useForm();

    // 条件配置的下拉选项 -- 双向数据绑定
    const [value, setValue] = useState(1);

    // 日期选择器
    const { RangePicker } = DatePicker;

    // 表单校验 点击提交的时候调用  --  确认
    const onCheck = async () => {
        try {
            // 随机数 50~100
            const hitNumber = Math.floor(Math.random() * 51 + 50)
            const values = await form.validateFields();
            console.log('Success:', values);
            // 对部分数据进行重写
            const optionData = {
                rulename: values.rules,
                riskweight: values.weight,
                start_time: timeData[0],
                expiration_time: timeData[1],
                use_status: values.rc_switch ? '1' : '2',
                condition_configuration: String(values.conditions),
                operation_configuration: values.operation,
                hit_counts: `${hitNumber}`,
                rule_comments: values.rc_rules_note
            }

            console.log("optionData", optionData)
            console.log("timeData", timeData)

            addRcData(optionData)
                .then(res => {
                    dispatch(rcDataShowRequest())
                    console.log(res)
                })
                .catch(err => {
                    console.log(err)
                })

        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
        }
    };

    // 取消
    const onCancel = e => {
        setVisible(false);
        // setConfirmLoading(false);
    }

    // 条件配置的下拉选项 -- 双向数据绑定
    const onChange = e => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };

    // 规则备注的内容 -- 获取数据
    const onChangeText = e => {
        console.log('Change:', e.target.value);
    };


    // 点击按钮 展开 模态框
    const showModal = () => {
        // 修改 visible 的值为 true
        setVisible(true);
    };

    // 点击左上方的 X 后的回调
    const handleCancel = () => {
        console.log('Clicked cancel button');
        setVisible(false);
    };

    const formDefaultData = {
        rc_switch: false,
        conditions: 1,
        operation: '1'
    }


    // 日期选择
    function onTimeChange(value, dateString) {

        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        setTimeData([
            ...dateString
        ])
    }

    useEffect(() => {
        console.log('Time: ', timeData);
    }, [timeData])

    function onTimeOk(value) {

        console.log('onOk: ', value);
    }

    return (
        <div>
            <Button type="primary" onClick={showModal} >
                添加规则
            </Button>
            <Modal
                title="添加规则"
                visible={visible}
                footer={null}
                onCancel={handleCancel}
                width={660}
                destroyOnClose={true}
            >
                {/* <p>{modalText}</p> */}

                {/* 内容 */}
                <>
                    <Form
                        labelCol={{
                            span: 5,
                        }}
                        preserve={false}

                        form={form}
                        name="dynamic_rule"
                        // 表单默认值
                        initialValues={
                            formDefaultData
                        }
                        wrapperCol={{
                            span: 18,
                        }}
                        layout="horizontal"
                        size='small'
                        className='rc-add-form'
                    >
                        <Form.Item label="规则名称: " required>
                            <Form.Item
                                name="rules"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入规则名',
                                    },
                                ]}
                            >
                                <Input placeholder='请输入' ></Input>
                            </Form.Item>
                        </Form.Item>

                        <Form.Item label="风险权重: " required className='risk_weighting'>
                            <Form.Item
                                name='weight'
                                rules={[
                                    {
                                        required: true,
                                        message: '请填入权重',
                                    },
                                ]}
                            >
                                <InputNumber
                                    style={{
                                        width: 200,
                                    }}
                                    min="0"
                                    max="1"
                                    step="0.1"
                                    stringMode
                                    placeholder='取0~1之间的小数'
                                />
                            </Form.Item>
                        </Form.Item>

                        <Form.Item label="开始/到期时间: " required>
                            <Form.Item
                                name='start'
                                rules={[
                                    {
                                        required: true,
                                        message: '请填写时间',
                                    },
                                ]}
                            >
                                <RangePicker
                                    locale={locale}
                                    showTime={{ format: 'HH:mm' }}
                                    format="YYYY-MM-DD HH:mm"
                                    onChange={onTimeChange}
                                    onOk={onTimeOk}
                                    getPopupContainer={triggerNode => triggerNode.parentNode}
                                />
                            </Form.Item>

                        </Form.Item>

                        <Form.Item label="上线/下线" valuePropName="checked" name='rc_switch'>
                            <Switch defaultChecked />
                        </Form.Item>

                        <Form.Item label="条件配置" required>
                            <Form.Item
                                name='conditions'
                                rules={[
                                    {
                                        required: true,
                                        message: '请填写条件配置',
                                    },
                                ]}
                            >
                                <div className='con-config'>
                                    <div style={{ display: 'block' }}>执行条件</div>
                                    <div className='conFig'>
                                        <Radio.Group onChange={onChange} value={value}>
                                            <Radio value={1}>满足以下所有条件</Radio>
                                            <Radio value={2}>满足一下任意条件</Radio>
                                        </Radio.Group>
                                    </div>
                                    <div className='rc-conditions'>
                                        <span className='rc-add-span'>1、添加规则模板</span>
                                        <span className='rc-add-span'>2、添加单条条件</span>
                                        <span className='rc-add-span'>3、添加条件组</span>
                                    </div>
                                </div>
                            </Form.Item>
                        </Form.Item>

                        <Form.Item label="操作配置: " required>
                            <Form.Item
                                name='operation'
                                rules={[
                                    {
                                        required: true,
                                        message: '请填写操作配置',
                                    },
                                ]}
                            >
                                <Select placeholder="请选择" style={{ width: '120px' }}>
                                    <Select.Option value="1">通过</Select.Option>
                                    <Select.Option value="2">拒绝</Select.Option>
                                    <Select.Option value="3">转人工审核</Select.Option>
                                </Select>
                            </Form.Item>
                        </Form.Item>

                        <Form.Item label="规则备注: " name='rc_rules_note'>
                            <TextArea showCount maxLength={100} onChange={onChangeText} autoSize={{ minRows: 5, maxRows: 24 }} />
                        </Form.Item>

                        {/* 底部按钮 */}
                        <Form.Item>
                            <div className='footer_btn'>
                                <Button type="primary" onClick={onCheck}>
                                    确认
                                </Button>
                                <Button type="primary" onClick={onCancel}>
                                    取消
                                </Button>
                            </div>
                        </Form.Item>

                    </Form>
                </>
            </Modal>
        </div>
    )
}

export default RcAddRules
